<template>
  <div class="c_19">
    <Suspense>
      <!-- 需要 -->
      <template #default>
        <SyncVue></SyncVue>
      </template>
      <template #fallback>
        <B19></B19>
      </template>
    </Suspense>
  </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from "vue";
import B19 from "./demo19_b.vue";

// 异步组件打包时不会打包进主文件，而是生成异步js文件，在调用的时候才会加载，实现了代码分包和性能优化
const SyncVue = defineAsyncComponent(() => import("./demo19_a.vue"));
</script>

<style scoped lang="scss">
.c_19 {
  width: 100%;
  .c_ {
    width: 440px;
    min-height: 200px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
      0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    .c_fir {
      display: flex;
      .cf_left {
        width: 80px;
        height: 80px;
        background: #eee;
        border-radius: 50%;
        border: 1px solid #ddd;
        overflow: hidden;
        .cfl_img {
          width: 100%;
          height: 100%;
          -webkit-user-drag: none;
        }
      }
      .cf_right {
        margin-left: 20px;
        width: calc(100% - 100px);
        height: 80px;
        display: flex;
        .cfr_title {
          font-size: 30px;
          font-weight: bold;
          align-items: flex-end;
          display: flex;
          padding-bottom: 10px;
          color: #666;
        }
        .cfr_age {
          font-size: 14px;
          color: #999;
          display: flex;
          padding-bottom: 10px;
          align-items: flex-end;
          margin-left: 10px;
        }
      }
    }
    .c_sec {
      width: 100%;
      color: #999;
      font-size: 14px;
      margin-top: 20px;
    }
  }
}
</style>
